<template>
  <div style="padding: 16px">
    <BasicTable
      @register="registerTable"
      @selection-change="handleSelectionChange"
      @row-click="handleRowClick"
    >
      <template #toolbar>
        <a-button v-auth="Permission.ADD" type="primary" @click="handleCreate"> 新增 </a-button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction :actions="createActions(record)" />
        </template>
      </template>
    </BasicTable>
    <GroupModal @register="registerModal" @success="handleSuccess" />
  </div>
</template>

<script lang="ts" setup name="Group">
  import {
    BasicTable,
    useTable,
    TableAction,
    ActionItem,
    EditRecordRow,
  } from '/@/components/Table';
  import { getConfigGroupPageApi, delConfigGroupApi } from '/@/api/sys/config';
  import { initConfigCache } from '/@/utils/cache/configCache';
  import { Permission, columns } from './group-option';
  import { useModal } from '/@/components/Modal';
  import GroupModal from './group-modal.vue';
  import { useMessage } from '/@/hooks/web/useMessage';

  const [registerTable, { reload, getSelectRowKeys, setSelectedRowKeys }] = useTable({
    title: '系统配置分组',
    rowKey: 'groupId',
    api: getConfigGroupPageApi,
    columns,
    formConfig: {
      labelWidth: 80,
    },
    striped: false,
    useSearchForm: false,
    bordered: true,
    canResize: true,
    ellipsis: true,
    rowSelection: { type: 'radio' },
    actionColumn: {
      width: 150,
      title: '操作',
      dataIndex: 'action',
      fixed: undefined,
    },
    afterFetch: handleAfterFetch,
  });

  const [registerModal, { openModal: openModal }] = useModal();

  const { createMessage } = useMessage();

  function handleCreate() {
    openModal(true, { isUpdate: false });
  }

  function handleEdit(record: Recordable) {
    openModal(true, {
      record,
      isUpdate: true,
    });
  }

  function handleDelete(record: Recordable) {
    delConfigGroupApi(record.groupId).then((res) => {
      initConfigCache();
      createMessage.success(res.msg);
      handleSuccess();
    });
  }

  function handleSuccess() {
    reload();
  }

  function createActions(record: EditRecordRow): ActionItem[] {
    return [
      {
        icon: 'clarity:note-edit-line',
        label: '编辑',
        auth: Permission.EDIT,
        onClick: handleEdit.bind(null, record),
      },
      {
        icon: 'ant-design:delete-outlined',
        label: '删除',
        auth: Permission.DEL,
        color: 'error',
        popConfirm: {
          title: '是否删除分组【' + record.groupName + '】？',
          confirm: handleDelete.bind(null, record),
        },
      },
    ];
  }

  // 表格请求之后，对返回值进行处理
  function handleAfterFetch(data) {
    if (data.length > 0) {
      setSelectedRowKeys([data[0].groupId]);
    } else {
      setSelectedRowKeys([]);
    }
    emitDictChange();
  }

  // 表格行点击事件
  function handleRowClick(record: Recordable) {
    setSelectedRowKeys([record.groupId]);
    emitDictChange();
  }

  // 表格行选中事件
  function handleSelectionChange() {
    emitDictChange();
  }

  // 分组变化事件
  const emit = defineEmits(['group-change']);
  function emitDictChange() {
    const selectedKeys = getSelectRowKeys();
    emit('group-change', selectedKeys.length > 0 ? selectedKeys[0] : '');
  }
</script>
